<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>讲堂详情</title>
		<link rel="stylesheet" href="./css/reset.css">
		<link rel="stylesheet" href="./css/header.css">
		<link rel="stylesheet" href="./css/member.css">
		<link rel="stylesheet" href="./fonts/iconfont.css">
		<link rel="stylesheet" href="./css/footer.css">
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./css/video-js.min.css">
		<script src="./js/jquery.min.js"></script>
		<script src="./js/common.js"></script>
		<script src="./js/video.min.js"></script>
	</head>
	<body>
		<div class="tops">
			<div class="info">
				<div class="divs">欢迎来到歌必网-咖啡综合专属服务平台~</div>
				<div class="divs">客服热线 17521209352</div>
			</div>
		</div>
		<div class="navigation">
			<div class="infos">
				<div class="lefts">
					<h1 class="logo">
						<a href="./index.html">
							<img src="./img/member/page-logo.png" alt="">
							<span>歌必网</span>
						</a>
					</h1>
					<nav class="nav_list">
						<div class="none">
							<a href="./index.html">首页</a>
						</div>
						<div class="none">
							<a href="./news.html">咨讯</a>
						</div>
						<div class="none">
							<a href="./lnsights.html">洞见</a>
						</div>
						<div class="none yes">
							<a href="./forums.html">讲堂</a>
						</div>
						<div class="none">
							<a href="./aMarket.html">市集</a>
						</div>
						<div class="none">
							<a href="./seryiceList.html">服务</a>
						</div>
						<div class="none">
							<a href="./community.html">社区</a>
						</div>
					</nav>
				</div>
				<div class="rihts">
					<img class="imgs" src="./img/all_sach.png" alt="" srcset="" />
					<div class="login_none">
						<a class="btn" href="./login.html">注册/登录</a>
					</div>
					<div class="login_adready" style="z-index: 999;">
						<a href="./member/uesrInfo.html">
							<img src="./img/all_tou.png" alt="" class="login_aready">
						</a>
						<div class="login_info">
							<div class="inner_info">
								<div class="head_img_box">
									<a href="./member/uesrInfo.html"><img src="./img/all_tou.png" alt=""
											class="head_img"></a>
									<div class="himg_right">
										<p class="name_box">
											<span class="name">再吃亿口</span> <span class="user_tab">暂未开通</span>
										</p>
										<p class="phone">15100743385</p>
									</div>
								</div>
								<ul class="menus vips">
									<li class="items">
										<a href="#" class="vip_btn"><i class="iconfont icon-huiyuan"></i>vip中心</a>
									</li>
								</ul>
								<ul class="menus">
									<li class="items">
										<a href="./member/myOrder.html"><i
												class="iconfont icon-shangpindingdan"></i>商品订单</a>
									</li>
									<li class="items">
										<a href="./member/myCourse.html"><i
												class="iconfont icon-wodekecheng"></i>我的课程</a>
									</li>
									<li class="items">
										<a href="./member/taskOrder.html"><i
												class="iconfont icon-dingdanrenwu"></i>任务订单</a>
									</li>
									<li class="items">
										<a href="./member/friendVerification.html"><i
												class="iconfont icon-tianjiahaoyou"></i>好友验证</a>
									</li>
								</ul>
								<ul class="menus other">
									<li class="items">
										<a href="./member/uesrInfo.html"><i class="iconfont icon-shezhi"></i>账号设置</a>
									</li>
									<li class="items">
										<a href="#" class="login_out"><i class="iconfont icon-tuichudenglu"></i>退出登录</a>
									</li>
								</ul>
							</div>

						</div>
					</div>
					<i class="iconfont icon-gengduo more"></i>
				</div>
			</div>
		</div>

		<div class="box_new">
			<!-- <img src="./img/hshop.png" alt="" srcset="" /> -->
			<video id="my-video" class="video-js" controls preload="auto" poster="m.jpg" data-setup="{}">
				<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
				<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
				<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
			</video>
			<div class="box_new_left">
				<div class="box_new_nav">
					<span> 目录（14） </span>
					<div class="bpttom_tips"></div>
				</div>
				<div class="all_box_new">
					<div class="box_new_lists">
						<div class="box_new_lists_left">
							<div class="title">
								咖啡入门基础知识(上)
							</div>
							<div class="titles">
								时长：40:10
							</div>
						</div>
						<img class="box_new_lists_right" src="./img/video-pr.png" alt="" srcset="" />
					</div>
					<div class="box_new_lists">
						<div class="box_new_lists_left">
							<div class="titleNone">
								咖啡入门基础知识(上)
							</div>
							<div class="titles">
								时长：40:10
							</div>
						</div>
						<img class="box_new_lists_right" src="./img/video-play.png" alt="" srcset="" />
					</div>
					<div class="box_new_lists">
						<div class="box_new_lists_left">
							<div class="titleNone">
								咖啡入门基础知识(上)
							</div>
							<div class="titles">
								时长：40:10
							</div>
						</div>
						<img class="box_new_lists_right" src="./img/video-lock.png" alt="" srcset="" />
					</div>
					<div class="box_new_lists">
						<div class="box_new_lists_left">
							<div class="titleNone">
								咖啡入门基础知识(上)
							</div>
							<div class="titles">
								时长：40:10
							</div>
						</div>
						<img class="box_new_lists_right" src="./img/video-lock.png" alt="" srcset="" />
					</div>
				</div>

			</div>
		</div>
		<div class="cn_info">
			<div class="base">
				<div class="base_left">
					<div class="header">
						<div class="default select">课程介绍</div>
						<div class="default">课程目录</div>
					</div>
					<div class="detail" id="catalogue">
						<img style="width: 100%;" src="./img/forum.png" alt="" srcset="" />
					</div>
					<div class="detail" id="introduce">
						<div class="items">
							<div class="items_info">
								<div class="items_info_left">
									<div
										style="font-weight: 500;font-size: 0.6875rem;color: #3E7CFF;border: 0.0625rem solid #3E7CFF;border-radius: 0.125rem;padding: 0 0.3125rem;">
										视频</div>
									咖啡入门基础知识(上)
								</div>
								<div class="items_info_right">
									<div>时长：40:10</div>
									<div>58次播放</div>
									<div style="color: #10B45C;">免费试学</div>
								</div>
							</div>
						</div>
						<div class="items">
							<div class="items_info">
								<div class="items_info_left">
									<div
										style="font-weight: 500;font-size: 0.6875rem;color: #3E7CFF;border: 0.0625rem solid #3E7CFF;border-radius: 0.125rem;padding: 0 0.3125rem;">
										视频</div>
									咖啡入门基础知识(上)
								</div>
								<div class="items_info_right">
									<div>时长：40:10</div>
									<div>58次播放</div>
									<img style="width: 1.5625rem;height: 1.5625rem;" src="./img/suspend.png" alt=""
										srcset="" />
								</div>
							</div>
						</div>
						<div class="items">
							<div class="items_info">
								<div class="items_info_left">
									<div
										style="font-weight: 500;font-size: 0.6875rem;color: #3E7CFF;border: 0.0625rem solid #3E7CFF;border-radius: 0.125rem;padding: 0 0.3125rem;">
										视频</div>
									咖啡入门基础知识(上)
								</div>
								<div class="items_info_right">
									<div>时长：40:10</div>
									<div>58次播放</div>
									<img style="width: 1.5625rem;height: 1.5625rem;" src="./img/plays.png" alt=""
										srcset="" />
								</div>
							</div>
						</div>
						<div class="items">
							<div class="items_info">
								<div class="items_info_left">
									<div
										style="font-weight: 500;font-size: 0.6875rem;color: #3E7CFF;border: 0.0625rem solid #3E7CFF;border-radius: 0.125rem;padding: 0 0.3125rem;">
										视频</div>
									咖啡入门基础知识(上)
								</div>
								<div class="items_info_right">
									<div>时长：40:10</div>
									<div>58次播放</div>
									<img style="width: 1.5625rem;height: 1.5625rem;" src="./img/lock.png" alt=""
										srcset="" />
								</div>
							</div>
						</div>
					</div>

				</div>
				<div class="base_right">
					<div class="base_right_top">
						<img class="imgs" src="./img/all_tou.png" alt="" srcset="" />
						<div class="base_right_top_right">
							<div class="top1s">
								刘导师
							</div>
							<div class="tips">
								<div>3 <span style="color: #666666;font-size: 0.75rem;">课程</span> </div>
								<div>600 <span style="color: #666666;font-size: 0.75rem;">人学习</span> </div>
							</div>
						</div>
					</div>
					<div class="base_right_bottom">
						简介：咖啡行业从业生涯超过10年，刘导师将多年的技术沉淀、行业认知、实战经验，融入到我们的咖啡创业培训课程里，在我们的充满咖啡浓郁香气的课堂里，可以清晰的掌握如何制作出一杯好咖啡，同时可以从理论层面彻底掌握好咖啡的标准！
					</div>
				</div>
			</div>

		</div>

		<div class="btons">
			<div class="app">
				<div class="tiitle">平台标语</div>
				<div class="jg"></div>
				<div class="ps">
					<div class="item">
						<img class="imgs" src="./img/all-xs.png" alt="" srcset="" />
						<div class="texts">
							<div class="texts1">学习</div>
							<div class="texts2">通过线上线下的社交化学习，<br>提升对数据资产的认知</div>
						</div>
					</div>
					<div class="item">
						<img class="imgs" src="./img/all-j.png" alt="" srcset="" />
						<div class="texts">
							<div class="texts1">交流</div>
							<div class="texts2">通过线上线下的社交化学习，<br>提升对数据资产的认知</div>
						</div>
					</div>
					<div class="item">
						<img class="imgs" src="./img/all-x.png" alt="" srcset="" />
						<div class="texts">
							<div class="texts1">协作</div>
							<div class="texts2">通过线上线下的社交化学习，<br>提升对数据资产的认知</div>
						</div>
					</div>
					<div class="item">
						<img class="imgs" src="./img/all-c.png" alt="" srcset="" />
						<div class="texts">
							<div class="texts1">创新</div>
							<div class="texts2">通过线上线下的社交化学习，<br>提升对数据资产的认知</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bottoms_all">
			<div class="bottoms">
				<div class="info">
					<div class="items">
						<div class="title">
							ABOUT
						</div>
						<div class="title">
							关于我们
						</div>
						<div class="jsx">我们的使命是通过不断优化和提高生产流程，为客户提供最优质的服务和产品</div>
						<div class="ewm">
							<div class="boxs">
								<img src="./img/member/ewm.png" alt="" srcset="" />
							</div>
							<div class="boxs">
								<img src="./img/member/ewm.png" alt="" srcset="" />
							</div>
						</div>
					</div>
					<div class="items">
						<div class="title">CONTACT</div>
						<div class="title">联系我们</div>
						<div class="jsx">地址：海南省海口市秀英区海秀街道办南海大道288号海鑫郦都7号楼海口药谷牛物医药创新综合体2层215室A00062号</div>
						<div class="jsx1">电话:(010)12345678</div>
						<div class="jsx1">Email: contact@example.net</div>
						<div class="jsx1">Web:www.innocorp.cn</div>
					</div>

					<div class="items">
						<div class="title">LINKS</div>
						<div class="title">友情链接</div>
						<div class="jsx">合作伙伴一</div>
						<div class="jsx1">合作伙伴二</div>
						<div class="jsx1">合作伙伴三</div>
						<div class="jsx1">合作伙伴四</div>
						<div class="jsx1">合作伙伴五</div>
					</div>
					<div class="items">
						<div class="title">MECHANISM</div>
						<div class="title">合作机构</div>
						<div class="imgs">
							<img src="./img/logo2.png" alt="" srcset="" />
						</div>
						<div class="imgs">
							<img src="./img/logo1.png" alt="" srcset="" />
						</div>
					</div>
				</div>
				<div class="bq">版权所有 ◎ 2024|海南孚润数字技术有限公司|京ICP备12345678号</div>
				<div class="bqs">数据资产管理入表</div>
			</div>
		</div>
	</body>
</html>
<script>
	$(document).ready(function() {
		$('.header .default').click(function() {
			// 移除所有 .default 元素的 select 类名
			$('.header .default').removeClass('select');
			// 为当前点击的元素添加 select 类名
			$(this).addClass('select');
			// 获取当前点击元素的索引
			var index = $(this).index();
			// 隐藏所有的 .detail 元素
			$('.detail').hide();
			// 显示与点击的 .default 对应的 .detail 元素
			$('.detail').eq(index).show();
		});
		$('.detail').hide().eq(0).show();
	});
	videojs.addLanguage('zh-CN', {
		"Play": "播放",
		"Pause": "暂停",
		"Current Time": "当前时间",
		"Duration": "时长",
		"Remaining Time": "剩余时间",
		"Stream Type": "媒体流类型",
		"LIVE": "直播",
		"Loaded": "加载完毕",
		"Progress": "进度",
		"Fullscreen": "全屏",
		"Non-Fullscreen": "退出全屏",
		"Mute": "静音",
		"Unmute": "取消静音",
		"Playback Rate": "播放速度",
		"Subtitles": "字幕",
		"subtitles off": "关闭字幕",
		"Captions": "内嵌字幕",
		"captions off": "关闭内嵌字幕",
		"Chapters": "节目段落",
		"Close Modal Dialog": "关闭弹窗",
		"Descriptions": "描述",
		"descriptions off": "关闭描述",
		"Audio Track": "音轨",
		"You aborted the media playback": "视频播放被终止",
		"A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
		"The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
		"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
		"No compatible source was found for this media.": "无法找到此视频兼容的源。",
		"The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。",
		"Play Video": "播放视频",
		"Close": "关闭",
		"Modal Window": "弹窗",
		"This is a modal window": "这是一个弹窗",
		"This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
		", opens captions settings dialog": ", 开启标题设置弹窗",
		", opens subtitles settings dialog": ", 开启字幕设置弹窗",
		", opens descriptions settings dialog": ", 开启描述设置弹窗",
		", selected": ", 选择",
		"captions settings": "字幕设定",
		"Audio Player": "音频播放器",
		"Video Player": "视频播放器",
		"Replay": "重播",
		"Progress Bar": "进度小节",
		"Volume Level": "音量",
		"subtitles settings": "字幕设定",
		"descriptions settings": "描述设定",
		"Text": "文字",
		"White": "白",
		"Black": "黑",
		"Red": "红",
		"Green": "绿",
		"Blue": "蓝",
		"Yellow": "黄",
		"Magenta": "紫红",
		"Cyan": "青",
		"Background": "背景",
		"Window": "视窗",
		"Transparent": "透明",
		"Semi-Transparent": "半透明",
		"Opaque": "不透明",
		"Font Size": "字体尺寸",
		"Text Edge Style": "字体边缘样式",
		"None": "无",
		"Raised": "浮雕",
		"Depressed": "压低",
		"Uniform": "均匀",
		"Dropshadow": "下阴影",
		"Font Family": "字体库",
		"Proportional Sans-Serif": "比例无细体",
		"Monospace Sans-Serif": "单间隔无细体",
		"Proportional Serif": "比例细体",
		"Monospace Serif": "单间隔细体",
		"Casual": "舒适",
		"Script": "手写体",
		"Small Caps": "小型大写字体",
		"Reset": "重启",
		"restore all settings to the default values": "恢复全部设定至预设值",
		"Done": "完成",
		"Caption Settings Dialog": "字幕设定视窗",
		"Beginning of dialog window. Escape will cancel and close the window.": "开始对话视窗。离开会取消及关闭视窗",
		"End of dialog window.": "结束对话视窗"
	});
	var myPlayer = videojs('my-video');
	videojs("my-video").ready(function() {
		var myPlayer = this;
		myPlayer.play();
	});
</script>
<style>
	@media screen and (max-width: 768px) {
		.box_new {
			width: calc(100% - 3rem);
			margin: 1.25rem auto 0;
			background: #1B2128;
			padding-bottom: 2rem;
			/* display: flex; */
		}

		.box_new img {
			width: 100%;
			/* height: 35.625rem; */
		}

		.box_new video {
			width: 100%;
			/* height: 35.625rem; */
		}

		.box_new .video-js {
			width: 100%;
		}

		.box_new_left {
			padding-left: 1.5rem;
			padding-right: 0.875rem;
			flex: 1;
		}

		.box_new_nav {
			padding-top: 1.0625rem;
			font-family: Arial, Arial;
			font-weight: 400;
			font-size: 1rem;
			color: #BBBEC7;
			padding-bottom: 0.875rem;
			padding-bottom: 0.0625rem solid background: #293039;
			position: relative;
			margin-bottom: 0.625rem;
		}

		.all_box_new {
			max-height: 33rem;
			overflow: hidden;
			overflow-y: auto;
		}

		.bpttom_tips {
			position: absolute;
			bottom: 0;
			width: 1.125rem;
			height: 0.1875rem;
			background: #3E7CFF;
			border-radius: 0.125rem;
			left: 1.7rem;
		}

		.box_new_lists {
			width: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0.8125rem 0.875rem;
			background: #0F1419;
			border-radius: 0.375rem;
			margin-top: 0.5rem;
		}

		.box_new_lists_left .title {
			font-family: Microsoft YaHei UI, Microsoft YaHei UI;
			font-weight: 400;
			font-size: 1rem;
			color: #3E7CFF;
		}

		.box_new_lists_left .titleNone {
			color: #A1A9B2;
			font-family: Microsoft YaHei UI, Microsoft YaHei UI;
			font-weight: 400;
			font-size: 1rem;
		}

		.box_new_lists_left .titles {
			font-family: Microsoft YaHei UI, Microsoft YaHei UI;
			font-weight: 400;
			font-size: 0.75rem;
			color: #728199;
			margin-top: 0.625rem;
		}

		.box_new_lists_right {
			width: 1.25rem !important;
			height: 1.25rem !important;
		}

		.cn_info {
			width: calc(100% - 3rem);
			margin: 0rem auto 0;

			padding-bottom: 4.375rem;
			display: flex;
		}

		.cn_info .base {
			/* width: auto;
			padding: 1.5625rem 1.3125rem;
			background: #FFFFFF;
			border-radius: 0.4375rem; */
			display: flex;
			flex-direction: column;
			width: 100%;
			gap: 0.875rem;
			margin-top: 1.125rem;
			justify-content: space-between;
		}

		.cn_info .base .base_left {
			width: 100%;
			order: 2;
			background: #FFFFFF;
			border-radius: 0.4375rem;
		}

		.cn_info .base .base_left .header {
			width: auto;
			padding: 1.3125rem 1.3125rem 0 1.3125rem;
			display: flex;
			gap: 4.4375rem;
		}

		.cn_info .base .base_left .header .select {
			font-weight: bold;
			font-size: 1.125rem;
			color: #3E7CFF;
			border-bottom: 2px solid #3E7CFF;
			/* 横线的颜色和粗细 */
			padding-bottom: 2px;
			/* 距离文字的间距 */
		}

		.cn_info .base .base_left .header .default {
			font-weight: 400;
			font-size: 1.125rem;
			color: #333333;
		}

		.cn_info .base .base_left .detail {
			width: auto;
			padding: 1.3125rem;
		}

		.cn_info .base .base_left .detail .items {
			height: 3.3125rem;
			background: #F7F8FA;
			border-radius: 0.3125rem;
			margin-top: 0.875rem;
		}

		.cn_info .base .base_left .detail .items .items_info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: auto;
			height: 3.3125rem;
			padding: 0 1.125rem;
		}

		.cn_info .base .base_left .detail .items .items_info .items_info_left {
			display: flex;
			gap: 0.5625rem;
			font-weight: 500;
			font-size: 0.875rem;
			color: #333333;
			align-items: center;
		}

		.cn_info .base .base_left .detail .items .items_info .items_info_right {
			display: flex;
			gap: 0.5625rem;
			font-weight: 500;
			font-size: 0.75rem;
			color: #939598;
			align-items: center;
		}

		.cn_info .base .base_right {
			order: 1;
			width: 100%;
			padding-bottom: 1rem;
			background: #FFFFFF;
			border-radius: 0.4375rem;
		}

		.cn_info .base .base_right .base_right_top {
			width: auto;
			padding: 0 1.125rem;
			display: flex;
			margin-top: 2rem;
			align-items: center;
			gap: 1.125rem;
		}

		.cn_info .base .base_right .base_right_top .imgs {
			width: 3.5625rem;
			height: 3.5625rem;
		}

		.cn_info .base .base_right .base_right_top .base_right_top_right .top1s {
			font-weight: bold;
			font-size: 0.875rem;
			color: #333333;
		}

		.cn_info .base .base_right .base_right_top .base_right_top_right .tips {
			margin-top: 0.3125rem;
			display: flex;
			gap: 0.9375rem;
			font-weight: 400;
			font-size: 0.875rem;
			color: #3E7CFF;
		}

		.cn_info .base .base_right .base_right_bottom {
			margin-top: 1.3125rem;
			width: auto;
			padding: 0 1.125rem;
			font-weight: 400;
			font-size: 0.75rem;
			color: #666666;
		}
	}

	@media screen and (min-width: 768px) {
		.box_new {
			width: calc(100% - 22.5rem);
			margin: 1.25rem auto 0;
			background: #1B2128;
			padding-bottom: 4.375rem;
			display: flex;
		}

		.box_new img {
			width: 67rem;
			height: 35.625rem;
		}

		.box_new video {
			width: 67rem;
			height: 35.625rem;
		}

		.box_new .video-js {
			width: 67rem;
			height: 35.625rem;
		}

		.box_new_left {
			padding-left: 1.5rem;
			padding-right: 0.875rem;
			flex: 1;
		}

		.box_new_nav {
			padding-top: 1.0625rem;
			font-family: Arial, Arial;
			font-weight: 400;
			font-size: 1rem;
			color: #BBBEC7;
			padding-bottom: 0.875rem;
			padding-bottom: 0.0625rem solid background: #293039;
			position: relative;
			margin-bottom: 0.625rem;
		}

		.all_box_new {
			height: 33rem;
			overflow: hidden;
			overflow-y: auto;
		}

		.bpttom_tips {
			position: absolute;
			bottom: 0;
			width: 1.125rem;
			height: 0.1875rem;
			background: #3E7CFF;
			border-radius: 0.125rem;
			left: 1.7rem;
		}

		.box_new_lists {
			width: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0.8125rem 0.875rem;
			background: #0F1419;
			border-radius: 0.375rem;
			margin-top: 0.5rem;
		}

		.box_new_lists_left .title {
			font-family: Microsoft YaHei UI, Microsoft YaHei UI;
			font-weight: 400;
			font-size: 1rem;
			color: #3E7CFF;
		}

		.box_new_lists_left .titleNone {
			color: #A1A9B2;
			font-family: Microsoft YaHei UI, Microsoft YaHei UI;
			font-weight: 400;
			font-size: 1rem;
		}

		.box_new_lists_left .titles {
			font-family: Microsoft YaHei UI, Microsoft YaHei UI;
			font-weight: 400;
			font-size: 0.75rem;
			color: #728199;
			margin-top: 0.625rem;
		}

		.box_new_lists_right {
			width: 1.25rem !important;
			height: 1.25rem !important;
		}

		.cn_info {
			width: calc(100% - 22.5rem);
			margin: 0rem auto 0;

			padding-bottom: 4.375rem;
			display: flex;
		}

		.cn_info .base {
			/* width: auto;
			padding: 1.5625rem 1.3125rem;
			background: #FFFFFF;
			border-radius: 0.4375rem; */
			display: flex;
			width: 100%;
			gap: 0.875rem;
			margin-top: 1.125rem;
			justify-content: space-between;
		}

		.cn_info .base .base_left {
			flex: 1;
			background: #FFFFFF;
			border-radius: 0.4375rem;
		}

		.cn_info .base .base_left .header {
			width: auto;
			padding: 1.3125rem 1.3125rem 0 1.3125rem;
			display: flex;
			gap: 4.4375rem;
		}

		.cn_info .base .base_left .header .select {
			font-weight: bold;
			font-size: 1.125rem;
			color: #3E7CFF;
			border-bottom: 2px solid #3E7CFF;
			/* 横线的颜色和粗细 */
			padding-bottom: 2px;
			/* 距离文字的间距 */
		}

		.cn_info .base .base_left .header .default {
			font-weight: 400;
			font-size: 1.125rem;
			color: #333333;
		}

		.cn_info .base .base_left .detail {
			width: auto;
			padding: 1.3125rem;
		}

		.cn_info .base .base_left .detail .items {
			height: 3.3125rem;
			background: #F7F8FA;
			border-radius: 0.3125rem;
			margin-top: 0.875rem;
		}

		.cn_info .base .base_left .detail .items .items_info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: auto;
			height: 3.3125rem;
			padding: 0 1.125rem;
		}

		.cn_info .base .base_left .detail .items .items_info .items_info_left {
			display: flex;
			gap: 0.5625rem;
			font-weight: 500;
			font-size: 0.875rem;
			color: #333333;
			align-items: center;
		}

		.cn_info .base .base_left .detail .items .items_info .items_info_right {
			display: flex;
			gap: 0.5625rem;
			font-weight: 500;
			font-size: 0.75rem;
			color: #939598;
			align-items: center;
		}

		.cn_info .base .base_right {
			width: 21.875rem;
			height: 15.3125rem;
			background: #FFFFFF;
			border-radius: 0.4375rem;
		}

		.cn_info .base .base_right .base_right_top {
			width: auto;
			padding: 0 1.125rem;
			display: flex;
			margin-top: 2rem;
			align-items: center;
			gap: 1.125rem;
		}

		.cn_info .base .base_right .base_right_top .imgs {
			width: 3.5625rem;
			height: 3.5625rem;
		}

		.cn_info .base .base_right .base_right_top .base_right_top_right .top1s {
			font-weight: bold;
			font-size: 0.875rem;
			color: #333333;
		}

		.cn_info .base .base_right .base_right_top .base_right_top_right .tips {
			margin-top: 0.3125rem;
			display: flex;
			gap: 0.9375rem;
			font-weight: 400;
			font-size: 0.875rem;
			color: #3E7CFF;
		}

		.cn_info .base .base_right .base_right_bottom {
			margin-top: 1.3125rem;
			width: auto;
			padding: 0 1.125rem;
			font-weight: 400;
			font-size: 0.75rem;
			color: #666666;
		}
	}
</style>